import {
    Flex,
    Box,
    FormControl,
    FormLabel,
    Input,
    Checkbox,
    Stack,
    Button,
    Heading,
    Text,
    useColorModeValue, Radio, RadioGroup,
} from '@chakra-ui/react'
import React, {useEffect, useState} from "react";
import {useNavigate} from "react-router-dom";
import {useAuth} from "../hooks/index.js";

export default function LoginPage() {
    const navigate = useNavigate()
    const [value, setValue] = React.useState('1')
    const [username, setUsername] = useState('')
    const [password, setPassword] = useState('')
    const {handleLogin} = useAuth()

    async function handleClick() {
        console.log(username, password, value === '1')
        // handleLogin(username, password, value === '1')
        handleLogin(username, password, value)
    }

    return (
        <Flex
            align={'center'}
            justify={'center'}
            className={useColorModeValue('', 'dark')}
            bg={useColorModeValue('gray.50', 'gray.800')}>
            <Stack spacing={8} mx={'auto'} maxW={'lg'} py={12} px={6}>
                <Stack align={'center'}>
                    <Heading fontSize={'4xl'}>Sign in to your account</Heading>
                    {/*<Text fontSize={'lg'} color={'gray.600'}>*/}
                    {/*    to enjoy all of our cool <Text color={'blue.400'}>features</Text> ✌️*/}
                    {/*</Text>*/}
                </Stack>
                <Box
                    rounded={'lg'}
                    bg={useColorModeValue('white', 'gray.700')}
                    boxShadow={'lg'}
                    p={8}>
                    <Stack spacing={4}>
                        <FormControl id="username">
                            <FormLabel>Username</FormLabel>
                            <Input
                                onChange={(e) => setUsername(e.target.value)}
                                value={username} type="text"/>
                        </FormControl>
                        <FormControl id="password">
                            <FormLabel>Password</FormLabel>
                            <Input
                                onChange={(e) => setPassword(e.target.value)}
                                value={password} type="text"/>
                                {/*value={password} type="password"/>*/}
                        </FormControl>
                        <Stack spacing={10}>
                            <Stack
                                direction={{base: 'column', sm: 'row'}}
                                align={'start'}
                                justify={'space-between'}>
                                <RadioGroup onChange={setValue} value={value}>
                                    <Stack direction='row'>
                                        <Radio value='1'>学生</Radio>
                                        <Radio value='2'>医生</Radio>
                                        <Radio value='3'>管理</Radio>
                                    </Stack>
                                </RadioGroup>
                                <Text color={'blue.400'}>Forgot password?</Text>
                            </Stack>
                            <Button
                                onClick={handleClick}
                                bg={'blue.400'}
                                color={'white'}
                                _hover={{
                                    bg: 'blue.500',
                                }}>
                                Sign in
                            </Button>
                        </Stack>
                    </Stack>
                </Box>
            </Stack>
        </Flex>
    )
}